<template>
  <!-- 待接运单 -->
  <div class="">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="85"
          class="search-form"
        >
          <FormItem label="原始单号" prop="goodNo">
            <Input
              type="text"
              v-model="searchForm.goodNo"
              placeholder="请输入原始单号"
              clearable
              style="width: 190px"
            />
          </FormItem>
          <FormItem label="托运单号" prop="orderNo">
            <Input
              type="text"
              v-model="searchForm.orderNo"
              placeholder="请输入托运单号"
              clearable
              style="width: 200px"
            />
          </FormItem>

          <FormItem label="货品名称" prop="goodSubType">
            <Input
              type="text"
              v-model="searchForm.goodSubType"
              placeholder="请输入货品名称"
              clearable
              style="width: 170px"
            />
          </FormItem>
          <FormItem label="货物类型" prop="goodType">
            <Select
              clearable
              v-model="searchForm.goodType"
              style="width: 210px"
              placeholder="选择货物类型"
            >
              <Option
                v-for="(item, index) in goodType"
                :key="index"
                :value="item.value"
                >{{ item.label }}
              </Option>
            </Select>
          </FormItem>
          <FormItem label="公司名称" prop="companyName">
            <Input
              type="text"
              v-model="searchForm.companyName"
              placeholder="请输入公司名称"
              clearable
              style="width: 170px"
            />
          </FormItem>
          <FormItem label="驾驶员姓名" prop="driverName">
            <Input
              type="text"
              v-model="searchForm.driverName"
              placeholder="请输入驾驶员姓名"
              clearable
              style="width: 170px"
            />
          </FormItem>

          <FormItem label="车牌号码" prop="driverCode">
            <Input
              type="text"
              v-model="searchForm.driverCode"
              placeholder="请输入车牌号码"
              clearable
              style="width: 160px"
            />
          </FormItem>

          <FormItem label="装货地址">
            <div style="width: 200px">
              <Cascader
                class="Unloadingcss"
                v-model="searchForm.LoadingAddress"
                :data="UnloadingAddresslist"
                :load-data="LoadingProvinceloadData"
                @on-change="getStartArea"
                clearable
              ></Cascader>
            </div>
          </FormItem>
          <FormItem label="卸货地址">
            <div style="width: 200px">
              <Cascader
                class="Unloadingcss"
                v-model="searchForm.UnloadingAddress"
                :data="UnloadingAddresslist1"
                :load-data="ProvinceloadData"
                @on-change="changeUnloading"
                clearable
              ></Cascader>
            </div>
          </FormItem>
          <FormItem label="装车时间">
            <DatePicker
              transfer
              clearable
              type="daterange"
              placement="bottom-end"
              placeholder="请选择日期"
              style="width: 200px"
              v-model="loadinTiem"
              @on-change="loadingDate"
            ></DatePicker>
          </FormItem>

          <FormItem label="卸车时间">
            <DatePicker
              transfer
              clearable
              type="daterange"
              placement="bottom-end"
              placeholder="请选择日期"
              style="width: 200px"
              v-model="unload"
              @on-change="unloadDate"
            ></DatePicker>
          </FormItem>
         
          <FormItem label="生成时间">
            <DatePicker
              transfer
              clearable
              type="daterange"
              placement="bottom-end"
              placeholder="请选择日期"
              style="width: 200px"
              v-model="date"
              @on-change="changeDate"
            ></DatePicker>
          </FormItem>
          <span style="margin-left: 35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
            <Button @click="getDataList" icon="md-refresh">刷新</Button>
          </span>
        </Form>
      </Row>
      <Row style="margin-top: 20px">
        <Table
          :loading="loading"
          border
          :columns="columns"
          :data="data"
          ref="table"
          sortable="custom"
          @on-sort-change="changeSort"
          @on-selection-change="changeSelect"
        >
          <template slot-scope="{ row }" slot="action">
            <div style="display: flex">
              <div>
                <span style="color: #2d8cf0; cursor: pointer" @click="edit(row)"
                  >管理
                </span>
              </div>
              <div>
                <Dropdown transfer trigger="click" style="margin-left: 20px">
                  <a href="javascript:void(0)" style="display: inline-block">
                    更多
                    <Icon type="ios-arrow-down"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                    <DropdownItem @click.native="waybillDocumentary(row)"
                      >处理日志</DropdownItem
                    >
                    <DropdownItem @click.native="operationRecordClick(row)"
                      >操作记录</DropdownItem
                    >
                  </DropdownMenu>
                </Dropdown>
              </div>
            </div>
          </template>
        </Table>
      </Row>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!--添加处理日志  -->
    <Modal
      v-model="documentaryRecordModal"
      title="处理日志"
      width="600"
      :styles="{ top: '100px' }"
    >
      <div>
        <div>
          <div class="comment-container">
            <div class="ontain">
              <div v-if="waybillRecordList.length < 1">暂无数据</div>
              <div
                else
                class="listItem"
                v-for="(item, index) in waybillRecordList"
                :key="`tousu${index}`"
              >
                <div style="display: flex; word-break: break-all">
                  <div
                    style="width: inherit; display: block; white-space: normal"
                  >
                    [{{ item.name }}] [{{ item.createTime }}] {{ item.content }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="Signcss">
          <div style="display: flex; margin-top: 15px">
            <div class="contentInput">
              <Input
                type="textarea"
                style="width: 400px"
                v-model="documentaryRecord"
                placeholder="请输入处理日志"
                rows="2.4"
                :autosize="{ minRows: 2.4, maxRows: 5 }"
              >
              </Input>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button
          type="primary"
          :loading="documentarybtn"
          @click="documentaryPreservation"
          >保存</Button
        >
      </div>
    </Modal>
    <!-- 投保弹框 -->
    <Modal v-model="modallInsure" title="货运投保">
      <div>
        <div>
          <span> 保单编号 </span>
          <span style="margin-left: 4px">
            <InputNumber
              style="width: 300px"
              :min="1"
              v-model="policyNoCode"
              placeholder="请输入保单编号"
            ></InputNumber>
          </span>
        </div>
        <div class="lInsure-upload">
          <div></div>
          <span class="lInsurimg"> 保单单据</span>
          <span>
            <div class="uploSigned">
              <div :class="policPyicture.url != '' ? 'demo-upload-list' : ''">
                <template>
                  <div>
                    <img :src="policPyicture.url" alt="" />
                  </div>
                  <div class="demo-upload-list-cover">
                    <Icon
                      type="ios-eye-outline"
                      @click.native="handleView(policPyicture.url)"
                    ></Icon>
                    <Icon
                      type="ios-trash-outline"
                      @click.native="handleRemove(policPyicture)"
                    ></Icon>
                  </div>
                </template>
              </div>
              <Upload
                :disabled="false"
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg', 'jpeg', 'png']"
                :max-size="20480"
                :on-format-error="handleFormatError"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                :headers="header"
                type="drag"
                :action="uploadConsultingId"
                style="display: inline-block; width: 58px"
              >
                <div style="width: 58px; height: 58px; line-height: 58px">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
              </Upload>
              <Modal title="" v-model="visible">
                <!-- <img :src="imgName" v-if="visible" style="width: 100%" /> -->
              </Modal>
              <!-- <div slot="footer"></div> -->
            </div>
          </span>
        </div>
      </div>
      <div slot="footer">
        <Button @click="insureDetermin" type="primary">投保</Button>
      </div>
    </Modal>
    <!-- 自定义导出数据 -->
    <Modal
      v-model="exportModalVisible"
      :title="exportTitle"
      :loading="loadingExport"
      @on-ok="exportCustomData"
    >
      <Form ref="exportForm" :label-width="100">
        <FormItem label="导出文件名">
          <Input v-model="filename" />
        </FormItem>
        <FormItem label="自定义导出列">
          <CheckboxGroup v-model="chooseColumns">
            <Checkbox
              v-for="(item, i) in exportColumns"
              :label="item.title"
              :key="i"
              :value="item.checked"
              :disabled="item.disabled"
            ></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="备注">
          <Input
            v-model="exportRemarks"
            placeholder="备注"
            style="width: 300px"
          />
        </FormItem>
      </Form>
    </Modal>
    <!--  -->

    <!-- 驾驶员详情   -->
    <DriverDetails
      @DriverDetaEnd="DriverDetaEnd"
      :BidderdUserId="BidderdUserId"
      :driverModalue="this.driverModalue"
    >
    </DriverDetails>
    <!-- 货主详情 -->
    <OwnerDetails
      @OwnerDetaiEnd="OwnerDetaiEnd"
      :OwnerDetailsId="OwnerDetailsId"
      :OwnerDetailsModalue="this.OwnerDetailsModalue"
    >
    </OwnerDetails>
    <!-- 车辆详情 -->
    <VehicleDetails
      @VehicleDetailsEnd="VehicleDetailsEnd"
      :VehicleDetailsId="VehicleDetailsId"
      :VehicleDetailsModalue="this.VehicleDetailsModalue"
    >
    </VehicleDetails>
    <!-- 车主 -->
    <NewOwnerDetails
      @newOwnerDetailsEnd="newOwnerDetailsEnd"
      :newOwnerDetailsId="newOwnerDetailsId"
      :newOwnerDetails="this.newOwnerDetails"
    >
    </NewOwnerDetails>
    <operationRecord
      @operationRecordEnd="operationRecordEnd"
      :operationRecordData="operationRecordData"
      :operationRecordModal="this.operationRecordModal"
    >
    </operationRecord>
  </div>
</template>

<script>
// import Cookies from "js-cookie";
// 根据你的实际请求api.js位置路径修改
import excel from "@/libs/excel";
import DriverDetails from "@/views/componentsonn_source_goods/DriverDetails";
import OwnerDetails from "@/views/componentsonn_source_goods/OwnerDetails";
import VehicleDetails from "@/views/componentsonn_source_goods/VehicleDetails";
import { getStore, setStore } from "@/libs/storage";
import * as imageConversion from "image-conversion";
import { getOrderOrderList } from "@/api/order";
import NewOwnerDetails from "@/views/componentsonn_source_goods/newOwnerDetails";
import {
  uploadComplaintPicId,
  orderaddDocumentary,
  uploadInsurePicId,
  addDownloadRecord,
} from "@/api/index";
import {
  getProvinceData,
  getAreaCityList,
  getDocumentaryListOrder,
} from "@/api/index";
import operationRecord from "@/views/componentsonn_source_goods/operationRecord";
import { es } from "date-fns/locale";
export default {
  name: "orderWaiting",
  components: {},
  data() {
    return {
      newOwnerDetails: false, //车主弹框
      newOwnerDetailsId: "", //车主Id

      whole: "",
      policPyicture: {}, //投保图片文件夹
      policyNoId: "", //投保图片文件夹
      modallInsure: false, //投保弹框
      policyNoCode: "", //保单编号
      documentaryRecordModal: false, //日志弹框
      documentaryRecord: "", //新增处理日志
      documentarybtn: false, //日志加载
      waybillRecordList: [], //处理日志
      entrustedId: "",
      BidderdUserId: "", //报价人Id
      driverModalue: false, //驾驶员详情弹框

      OwnerDetailsId: "", //货主Id
      OwnerDetailsModalue: false, //货主详情弹框

      VehicleDetailsId: "", //车辆id
      VehicleDetailsModalue: false, //车辆详情弹框
      // 投诉

      header: {
        "content-type": "multipart/form-data",
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      fileall: "",
      uploadList: [],
      visible: false,
      uploadConsultingId: uploadComplaintPicId,
      showDetail: false,

      loading: true, // 表单加载状态
      UnloadingAddresslist: [], //卸省份数据
      UnloadingAddresslist1: [], //卸省份数据
      switchTabs: "Carry",
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "", // 默认排序字段
        order: "", // 默认排序方式
        orderNo: "", //订单编号
        driverName: "",
        driverCode: "",
        companyName: "", //公司名称
        orderStates: "0", //,6,7
        startDate: "",
        endDate: "",
        beginAreaCode: "",
        endAreaCode: "",
        abnormalState: "", //异常状态
        LoadingAddress: "",
        UnloadingAddress: "",
        goodNo: "",
        loadingStartDate: "", //装货开始时间
        loadingEndDate: "", //装货结束时间
        dischargeStartDate: "", //卸货开始时间
        dischargeEndDate: "", //卸货结束时间
        goodType: "",
      },
      goodType: [],
      loadinTiem: [], // 装车时间
      unload: [], //卸车时间
      //地址筛选
      regionData: [],
      begin: [],
      end: [],
      InsuranceList: [], // 多选数据保险
      exportData: [], // 多选导出数据
      exportModalVisible: false, // 自定义导出显示
      exportTitle: "确认导出",
      filename: "运单管理列表",
      exportRemarks: "",
      chooseColumns: [],

      columns: [
        {
          type: "index",
          title: "#",
          width: "60",
        },
        {
          title: "原始单号",
          key: "goodNo",
          minWidth: 190,
          sortable: false,
        },
        {
          title: "托运单号",
          key: "orderNo",
          minWidth: 190,
          sortable: false,
        },
           {
          title: "公司名称",
          minWidth: 220,
          sortable: false,
          render: (h, params) => {
            let placTop = "top";
            let cargoOwnerName = "";
            cargoOwnerName = params.row.companyInfoVo.companyName;
            let textN = "";
            if (cargoOwnerName.length > 12) {
              textN = cargoOwnerName.slice(0, 12) + "..."; // 进行数字截取
            } else {
              textN = cargoOwnerName;
            }
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: {
                  placement: placTop,
                  maxWidth: "220",
                  content: cargoOwnerName,
                  transfer: true,
                },
              },
              textN
            );
          },
        },
        {
          title: "驾驶员",
          width: 120,
          sortable: false,
          render: (h, params) => {
            // return h("div", params.row.driverInfoVo.nickName);
            if (params.row.driverInfoVo) {
              return h(
                "span",
                // {
                //   style: {
                //     color: "#1495e7",
                //     cursor: "pointer",
                //   },
                //   on: {
                //     click: () => {
                //       let obj = params.row.driverInfoVo;
                //       this.BidderdDiver(params.row);
                //     },
                //   },
                // },
                params.row.driverInfoVo.nickName
              );
            } else {
              return h(
                "span",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未选择"
              );
            }
          },
        },
        {
          title: "车辆",
          minWidth: 120,
          render: (h, params) => {
            if (params.row.vehicleInfoVo) {
              return h(
                "span",
                // {
                //   style: {
                //     color: "#1495e7",
                //     cursor: "pointer",
                //   },
                //   on: {
                //     click: () => {
                //       this.LookVehicleInfo(params.row);
                //     },
                //   },
                // },
                params.row.vehicleInfoVo.vehicleNum
              );
            } else {
              return h(
                "span",
                {
                  style: {
                    color: "#D0C4DE",
                  },
                },
                "未选择"
              );
            }
          },
        },
        {
          title: "装货地址",
          minWidth: 270,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.beginProvinceName +
              params.row.beginCityName +
              params.row.beginAreaName +
              params.row.beginAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, maxWidth: "270" },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      marginTop: "9px",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                      paddingRight: "5px",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },
        {
          title: "卸货地址",
          minWidth: 270,
          sortable: false,
          render: (h, params) => {
            let text =
              params.row.endProvinceName +
              params.row.endCityName +
              params.row.endAreaName +
              params.row.endAddress;
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: { placement: placTop, maxWidth: "270" },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      width: params.column._width * 0.85 + "px",
                      overflow: "hidden",
                      whiteSpace: "nowrap",
                      textOverflow: "ellipsis",
                      marginTop: "9px",
                    },
                  },
                  text
                ),
                h(
                  "span",
                  {
                    slot: "content",
                    style: {
                      whiteSpace: "normal",
                      wordBreak: "break-all",
                      paddingRight: "5px",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },

        {
          title: "货品名称",
          key: "goodSubType",
          minWidth: 120,
          sortable: false,
           tooltip: true,
        },

              {
          title: "货物类型",
          key: "goodType",
          minWidth: 120,
          sortable: false,
           render: (h, params) => {
            if (params.row.goodType) {
              return h(
                "span",
                this.$options.filters["TypeGoods"](params.row.goodType)
              );
            } else {
              return h(
                "span",
                "--"
              );
            }
          },
        },
        {
          title: "运费单价",
          key: "driverUnitPrice",
          minWidth: 160,
          sortable: false,
          render: (h, params) => {
            let text = "";
            if (params.row.driverUnitPrice) {
              text = params.row.driverUnitPrice + " 元/吨";
            } else {
              text = "0.00"+ " 元/吨";
            }
            return h("div", text);
          },
        },

        {
          title: "预计装车",
          key: "estimateLoadingTime",
          minWidth: 180,
          sortable: false,
          render: (h, params) => {
            let text = "";
            if (
              params.row.estimateLoadingTime != "" &&
              params.row.estimateLoadingTime != null
            ) {
              text = params.row.estimateLoadingTime;
            } else {
              text = "**-**-** **:**:**";
            }
            return h("div", text);
          },
        },
        {
          title: "实际装车",
          key: "loadingTime",
          minWidth: 180,
          sortable: false,
          render: (h, params) => {
            let text = "";
            if (
              params.row.loadingTime != "" &&
              params.row.loadingTime != null
            ) {
              text = params.row.loadingTime;
            } else {
              text = "**-**-** **:**:**";
            }
            return h("div", text);
          },
        },
        {
          title: "预计卸车",
          key: "estimateDischargeTime",
          minWidth: 180,
          sortable: false,
          render: (h, params) => {
            let text = "";
            if (
              params.row.estimateDischargeTime != "" &&
              params.row.estimateDischargeTime != null
            ) {
              text = params.row.estimateDischargeTime;
            } else {
              text = "**-**-** **:**:**";
            }
            return h("div", text);
          },
        },
        {
          title: "实际卸车",
          key: "endDate",
          minWidth: 180,
          sortable: false,
          render: (h, params) => {
            let text = "";
            if (
              params.row.dischargeTime != "" &&
              params.row.dischargeTime != null
            ) {
              text = params.row.dischargeTime;
            } else {
              text = "**-**-** **:**:**";
            }
            return h("div", text);
          },
        },

        {
          title: "运单来源",
          key: "orderSource",
          minWidth: 100,
          sortable: false,
      render: (h, params) => {
            if (params.row.orderSource == "1") {
              return h("div", "自主抢单");
            } else if (params.row.orderSource == "2") {
              return h("div", "平台派单");
            }  else {
              return h("div", "----");
            }
          },
        },
        {
          title: "运输要求",
          key: "content",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
            let text = params.row.content;
            if (!text || text == "") {
              text = "--";
            }
            let placTop = "top";
            if (params.index == 0) {
              placTop = "bottom";
            } else {
              placTop = "top";
            }
            return h(
              "Tooltip",
              {
                props: {
                  maxWidth: "120",
                  placement: placTop,
                  content: text,
                  transfer: true,
                },
              },
              [
                h(
                  "div",
                  {
                    style: {
                      display: "inline-block",
                      width: params.column._width * 0.6 + "px",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                    },
                  },
                  text
                ),
              ]
            );
          },
        },
        {
          title: "生成时间",
          key: "createTime",
          minWidth: 180,
          sortable: false,
        },
        {
          title: "运单状态",
          key: "orderState",
          fixed: "right",
          minWidth: 100,
          sortable: false,
          render: (h, params) => {
            let text = this.$options.filters["ORDER_STATUS"](
              params.row.orderState
            );
            let statusColor = "";
            if (params.row.orderState == 0) {
              statusColor = "primary";
            } else if (params.row.orderState == 1) {
              statusColor = "primary";
            } else if (params.row.orderState == 2) {
              statusColor = "primary";
            } else if (params.row.orderState == 3) {
              statusColor = "warning";
            } else if (params.row.orderState == 4) {
              statusColor = "warning";
            } else if (params.row.orderState == 5) {
              statusColor = "#468847";
            } else if (params.row.orderState == -1) {
              statusColor = "#D3D3D3";
            }
            return h("div", [
              h(
                "Tag",
                {
                  props: {
                    color: statusColor,
                  },
                },
                text
              ),
            ]);
          },
        },
        {
          title: "操作",
          fixed: "right",
          slot: "action",
          align: "center",
          width: 140,
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      electronicWaybill: false,
      // / 操作记录
      operationRecordModal: false,
      operationRecordData: {},
    };
  },
  components: {
    DriverDetails,
    OwnerDetails,
    VehicleDetails,
    NewOwnerDetails,
    operationRecord,
  },
  methods: {
    // 操作记录点击
    operationRecordClick(row) {
      this.operationRecordModal = true;
      this.operationRecordData.logType = 6;
      this.operationRecordData.oid = row.id;
    },
    // 操作记录关闭
    operationRecordEnd(val) {
      this.operationRecordModal = val;
      this.operationRecordData = {};
    },

    init() {
      this.getDataList();
      this.getProvinceDataList();
      this.getProvinceDataList1();
    },
    platformInfoVo(row) {
      this.$Modal.info({
        title: "实际承运人信息",
        content: `公司全称： ${row.companyName}
            <br>公司简称： ${row.abbreviation}
            <br>联系电话： ${row.companyPhone}
            `,
      });
    },
    // 查看合同
    signContract(row) {
      let pdf = "";
      pdf =
        this.$baseUrl +
        "/freight/file/view/" +
        row.deliveryOrderContractId +
        "?accessToken=" +
        this.accessToken +
        "&preview=true";
      window.open(pdf, "_blank");
    },

    //货主详细信息
    LookCargoOwnerInfo(row) {
      this.OwnerDetailsId = row.companyUserId;
      this.OwnerDetailsModalue = true;
    },
    // 货主详细信息关闭
    OwnerDetaiEnd(val) {
      this.OwnerDetailsModalue = val;
      this.OwnerDetailsId = "";
    },

    // 查看车辆详细
    LookVehicleInfo(row) {
      this.VehicleDetailsModalue = true;
      this.VehicleDetailsId = row.vehicleInfoVo.vehicleId;
    },
    //车辆详细信息关闭
    VehicleDetailsEnd(val) {
      this.VehicleDetailsModalue = val;
      this.VehicleDetailsId = "";
    },

    //车主详情
    newOwnerDetailsOpen(row) {
      this.newOwnerDetails = true;
      this.newOwnerDetailsId = row.actualCarrierUserId;
    },
    //车主信息关闭
    newOwnerDetailsEnd(val) {
      this.newOwnerDetails = val;
      this.newOwnerDetailsId = "";
    },

    // 承运人
    BidderdDiver(row) {
      this.BidderdUserId = row.driverUserId;
      this.driverModalue = true;
    },
    // 承运人详情关闭
    DriverDetaEnd(val) {
      this.driverModalue = val;
      this.BidderdUserId = "";
    },
    //装车时间
    loadingDate(val) {
      this.searchForm.loadingStartDate = val[0];
      this.searchForm.loadingEndDate = val[1];
    },
    //卸车时间
    unloadDate(val) {
      this.searchForm.dischargeStartDate = val[0];
      this.searchForm.dischargeEndDate = val[1];
    },
    //  搜索时间
    changeDate(val) {
      //改变选择日期
      this.searchForm.startDate = val[0];
      this.searchForm.endDate = val[1];
    },
    getStartArea(value) {
      this.searchForm.beginAreaCode = value[2];
    },
    getEndArea(value) {
      this.searchForm.endAreaCode = value[2];
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
      this.clearSelectAll();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.searchForm.sort = ""; // 默认排序字段
      this.searchForm.order = ""; // 默认排序方式
      this.searchForm.orderNo = "";
      this.searchForm.driverName = "";
      this.searchForm.driverCode = "";
      this.searchForm.companyName = "";

      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.orderStates = "0";
      this.begin = [];
      this.date = [];
      this.unload = [];
      this.loadinTiem = [];
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchForm.beginAreaCode = "";
      this.searchForm.endAreaCode = "";
      this.searchForm.goodSubType = "";
      this.searchForm.goodType = "";
      this.searchForm.LoadingAddress = "";
      this.searchForm.UnloadingAddress = "";
      this.searchForm.goodNo = "";
      this.searchForm.loadingStartDate = "";
      this.searchForm.loadingEndDate = "";
      this.searchForm.dischargeStartDate = "";
      this.searchForm.dischargeEndDate = "";

      this.searchForm.driverName = "";
      this.searchForm.driverCode = "";
      // 重新加载数据
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },

    getDataList() {
      this.loading = true;
      let arr = [];
      if (this.searchForm.LoadingAddress.length == 0) {
        this.searchForm.beginAreaCode = "";
      }
      if (this.searchForm.UnloadingAddress.length == 0) {
        this.searchForm.endAreaCode = "";
      }
      for (let item in this.searchForm) {
        if (!this.searchForm[item]) {
          delete this.searchForm[item];
        }
      }

      if (typeof this.searchForm.orderStates != "undefined") {
        if (this.searchForm.orderStates.length > 1) {
          arr = this.searchForm.orderStates.split(",");
        } else {
          arr.push(this.searchForm.orderStates);
        }
      }

      let obj = JSON.parse(JSON.stringify(this.searchForm));
      obj.sort = "";
      obj.order = "";
      obj.orderStates = arr;

      getOrderOrderList(obj).then((res) => {
        this.loading = false;
        if (res.success) {
          if (res.result != null) {
            this.data = res.result.records;
            this.total = res.result.total;
          } else {
            this.data = [];
          }
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },

    //风控颜色 装载签收吨数 与 时间
    returnCellColor(value1, value2, value3, value4, value5, value6) {
      let cellClassName = {
        transGoodWeight: "",
        startDate: "",
        realGoodWeight: "",
        endDate: "",
      };
      if (value1 == true) {
        cellClassName.transGoodWeight = "demo-table-info-row";
      } else {
        cellClassName.transGoodWeight = "";
      }

      if (value2 == true && value5 == true) {
        cellClassName.startDate = "demo-table-info-row";
      } else if (value2 == true) {
        cellClassName.startDate = "demo-table-info-row";
      } else if (value5 == true) {
        cellClassName.startDate = "demo-table-info-row";
      } else {
        cellClassName.startDate = "";
      }

      if (value3 == true) {
        cellClassName.realGoodWeight = "demo-table-info-row";
      } else {
        cellClassName.realGoodWeight = "";
      }

      if (value4 == true && value6 == true) {
        cellClassName.endDate = "demo-table-info-row";
      } else if (value4 == true) {
        cellClassName.endDate = "demo-table-info-row";
      } else if (value6 == true) {
        cellClassName.endDate = "demo-table-info-row";
      } else {
        cellClassName.endDate = "";
      }

      return cellClassName;
    },
    //时间格式化
    getTime(value) {
      let birthdays = new Date(value);
      let age = birthdays.valueOf();
      return age;
    },
    getProvinceDataList() {
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            this.UnloadingAddresslist = res.result;
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    getProvinceDataList1() {
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            this.UnloadingAddresslist1 = res.result;
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    // 搜索卸货详细地址
    ProvinceloadData(item, callback) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          callback();
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //搜索装货详细地址
    LoadingProvinceloadData(item, callback) {
      this.$nextTick(() => {
        item.loading = true;
        getAreaCityList({ code: item.value, type: item.level }).then((res) => {
          item.loading = false;
          if (res.code == 200) {
            res.result.forEach(function (e) {
              if (e.level != 3) {
                e.level = e.level;
                e.label = e.label;
                e.pid = e.pid;
                e.value = e.value;
                e.loading = false;
                e.children = [];
              } else {
                e.value = e.value;
                e.label = e.label;
              }
            });
            item.children = res.result;
            callback();
          } else {
            this.$Message.error(res.message);
          }
        });
      });
    },
    // 选择装货地址
    getStartArea(value, selectedData) {
      if (selectedData.length == 3) {
        this.searchForm.beginAreaCode = value[2]; //搜索赋值
      }
    },
    // 选择卸货地址
    changeUnloading(value, selectedData) {
      if (selectedData.length == 3) {
        this.searchForm.endAreaCode = value[2]; //搜索赋值
      }
    },
    // 点击查看回复图片
    handleView(url) {
      let image = new Image();
      image.src = url;
      let viewer = new Viewer(image, {
        hidden: function () {
          viewer.destroy();
        },
      });
      viewer.show();
    },

    // 删除图片
    handleRemove(file) {
      this.policPyicture = {};
    },
    // 成功
    handleSuccess(res, file, fileList) {
      if (res.result != null) {
        var a = res.result;
        this.enlargeImig =
          this.$baseUrl +
          "/freight/file/view/" +
          a +
          "?accessToken=" +
          this.accessToken +
          "&preview=true";
      }
    },
    // 文件格式验证失败时的钩子
    handleFormatError(file) {
      this.$Message.error("图片格式错误,指定上传图片格式 jpg、jpeg、png");
    },
    // 文件超出指定大小限制时的钩子
    handleMaxSize(file) {
      this.$Message.error("图片超出了最大存储限制");
    },
    //压缩图片
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // console.log("压缩前", file); // 压缩到400KB,大于400KB的图片都会进行压缩，小于则不会
        imageConversion.compressAccurately(file, 100).then((res) => {
          res = new File([res], file.name, {
            type: res.type,
            lastModified: Date.now(),
          });
          resolve(res);
        });
      });
    },
    // 上传文件之前的钩子，参数为上传的文件
    handleBeforeUpload(file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const _base64 = reader.result;
        file.url = _base64;
        this.policPyicture = file;
      };
      this.fileall = file;
      return false;
    },
    // 详情
    edit(row) {
      let key = JSON.stringify(this.searchForm);
      this.$router.push({
        path: "/detailScarryWaybill",
        query: {
          id: row.id,
          pageType: 16,
          page: this.searchForm.pageNumber,
          key: key,
        },
      });
    },
    // 日志
    waybillDocumentary(row) {
      this.entrustedId = row.id;
      this.documentaryRecordModal = true;
      this.documentaryList(row.id);
    },
    // 处理日志列表
    documentaryList(entrustedId) {
      getDocumentaryListOrder({
        orderId: entrustedId,
      }).then((res) => {
        if (res.code == 200) {
          this.waybillRecordList = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 处理日志
    documentaryPreservation() {
      if (this.documentaryRecord == "") {
        return this.$Message.warning("请输入处理日志");
      }
      this.documentarybtn = true;
      let datas = {
        operationId: this.entrustedId,
        content: this.documentaryRecord,
      };
      orderaddDocumentary(datas).then((res) => {
        this.documentarybtn = false;
        if (res.code == 200) {
          this.$Message.success("添加处理日志成功");

          this.documentaryRecord = "";
          this.documentaryList(this.entrustedId);
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    //确定投保
    insureDetermin() {
      if (this.policyNoCode == "") {
        return this.$Message.warning("请输入保单编号");
      }
      if (this.policPyicture.url == "") {
        return this.$Message.warning("请上传保单单据");
      }
      let param = new FormData(); // 创建form对象
      param.append("file", this.policPyicture);
      param.append("orderId", this.policyNoId);
      param.append("insureNumber", this.policyNoCode);
      uploadInsurePicId(param).then((res) => {
        if (res.code == 200) {
          this.modallInsure = false;
          this.getDataList();
          this.$Message.success("投保成功");
        } else {
          return this.$Message.error(res.message);
        }
      });
    },
  },

  mounted() {
    this.InitiatLaint = JSON.parse(
      window.localStorage.getItem("complaint_type")
    );
    this.goodType = JSON.parse(window.localStorage.getItem("good_type"));
    if (this.$route.query.page) {
      this.searchForm.pageNumber = this.$route.query.page;
    }
    if (this.$route.query.key) {
      let obj = JSON.parse(this.$route.query.key);
      this.searchForm = obj;
    } else {
      this.searchForm.orderStates = "0";
    }
    this.date = [];
    this.date.push(this.searchForm.startDate);
    this.date.push(this.searchForm.endDate);
    // 装车时间
    this.loadinTiem = [];
    this.loadinTiem.push(this.searchForm.loadingStartDate);
    this.loadinTiem.push(this.searchForm.loadingEndDate);
    // 卸车时间
    this.unload = [];
    this.unload.push(this.searchForm.dischargeStartDate);
    this.unload.push(this.searchForm.dischargeEndDate);
    this.goodType.forEach((item) => {
      item.label = item.description;
      if (item.subList) {
        item.subList.forEach((item2) => {
          item2.label = item2.description;
        });
        item.children = item.subList;
      }
    });
    this.init();
  },
};
</script>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/table-common.less";
.search {
  .operation {
    margin-bottom: 2vh;
  }
  .select-count {
    font-weight: 600;
    color: #40a9ff;
  }
  .select-clear {
    margin-left: 10px;
  }
  .page {
    margin-top: 2vh;
  }
  .drop-down {
    margin-left: 5px;
  }
}
.uploSigned {
  margin-top: 10px;
  margin-left: 15px;
  width: 300px;
  position: absolute;
  bottom: 75px;
  left: 9px;
}
</style>
<style   lang="less">
.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.demo-upload-list img {
  width: 100%;
  height: 100%;
}
.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}
.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.border_card {
  margin: 5px 0;
  border: 1px dashed #a9a9a9;
}
.replyinptu {
  textarea.ivu-input {
    border: 1px solid transparent;
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px transparent;
    // border-bottom: 1.3px solid gainsboro;
  }
}
.lInsure-upload {
  margin-top: 62px;
  display: flex;
  .uploSigned {
    margin-left: 72px;
  }
}
.lInsurimg {
  position: relative;
  top: -48px;
  left: 1px;
}
.ontain {
  height: 220px;
  overflow-y: scroll;
}
.listItem {
  padding: 7px;
  font-size: 14px;
  border-bottom: 1px #333 dotted;
  width: 99%;
}
.ivu-table .demo-table-info-row {
  background-color: #ffd7d7;
}
.hent {
  width: 100%;
  height: 40px;
}
.titels {
  margin-left: -50px;
}
.list-css {
  .ivu-list-small .ivu-list-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}
.carrlistMomoney {
  margin-left: 10px;
  font-weight: 600;
}
.capital {
  font-size: 15px;
  font-weight: 700;
}
.Unloadingcss {
  .ivu-cascader-menu {
    min-width: 155px !important;
  }
}
</style>